<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">-->
    <meta name="format-detection" content="telephone=no"/>
    <title>沟通中</title>
    <link rel="stylesheet" type="text/css" href="../../../static/newcj/css/themes.css?v=2017129">
    <link rel="stylesheet" type="text/css" href="../../../static/newcj/css/h5app.css">
    <link rel="stylesheet" type="text/css" href="../../../static/newcj/fonts/iconfont.css?v=2016070717">
    <link rel="stylesheet" type="text/css" href="../../../static/newcj/css/chat_list.css">
    <script src="../../../static//newcj/js/jquery.min.js"></script>
    <script src="../../../static/newcj/js/dist/flexible/flexible_css.debug.js"></script>
    <script src="../../../static/newcj/js/dist/flexible/flexible.debug.js"></script>
    <link rel="stylesheet" href="../../../static/js/element-plus/element_plus.css">

    <style>
        [v-cloak] {
            display: none !important;
        }
    </style>

</head>
<body>
<div class='fui-page-group' id="app" v-cloak>
    <div class="fui-statusbar"></div>
    <div class='fui-page chat-page'>
        <div class="fui-header">
            <div class="title">消息列表</div>
            <div class="fui-header-right"></div>
        </div>

        <div class="fui-content navbar chat-fui-content" style="padding-bottom: 2rem;">

            <div class="chat-list flex" v-for="item in message_list">
                <el-avatar shape="square" :size="150" fit="contain" :src="item.headimgurl"></el-avatar>
                <div class="chat-info" style="margin-left: 10px;">
                    <p class="chat-merch flex">
                        <span class="title t-28">{{item.nickname}}</span>
                        <span class="time">{{item.time}}</span>
                    </p>
                    <p class="chat-text singleflow-ellipsis">{{ item.content }}</p>
                </div>
            </div>


        </div>
    </div>
</div>
</body>
<script src="/plugin/webman/push/push.js"></script>
<script src="../../../static/js/element-plus/vue@next.js"></script>
<script src="../../../static/js/element-plus/element_plus.js"></script>
<script src="../../../static/js/element-plus/zh-cn.js"></script>
<script>
    let API_URL = "<?=htmlspecialchars($api_url)?>";
    let WS_URL = "<?=htmlspecialchars($ws_url)?>";
    ElementPlus.locale(ElementPlus.lang.zhCn)
    const App = {
        data() {
            return {
                uid: '',
                msg_content: '',
                type: 1,//1是普通文本，2是图片
                message_list: []
            };
        },
        created: function () {
            this.uid = "<?=htmlspecialchars($from_id)?>"
            this.get_list()
            this.build_ws()
        },
        methods: {
            //建立ws连接
            build_ws() {
                let that = this
                // 建立连接
                let connection = new Push({
                    url: WS_URL, // websocket地址
                    app_key: 'dcfa8e47b8ac675d6b9a080e981fdc2b',
                    auth: '/plugin/webman/push/auth' // 订阅鉴权(仅限于私有频道)
                });
                // 浏览器监听user-1频道的消息，也就是用户uid为1的用户消息
                let user_channel = connection.subscribe(that.uid);
                // 当user-1频道有message事件的消息时
                user_channel.on('message', function (data) {
                    // data里是消息内容
                    console.log(data);
                    that.get_list()
                });
            },
            //获取聊天记录
            get_list() {
                let that = this;
                $.ajax({
                    url: API_URL + "get_list",
                    data: {
                        uid: that.uid,
                    },
                    dataType: "json",
                    type: "post",
                    success: function (res) {
                        if (res.code === 200) {
                            that.message_list = res.data
                        }
                    }
                });
            }
        }
    };
    const app = Vue.createApp(App);
    app.use(ElementPlus);
    app.mount("#app");
    // var API_URL = "http://127.0.0.1:8787/api/chat/";
    // var from_id ='{$from_id}';
    //
    // ws =  new WebSocket("ws://0.0.0.0:3131");
    //
    // ws.onmessage=function(e){
    //     conosle.log(e)
    //     var message = eval("("+ e.data+")");
    //
    //     switch (message.type){
    //         case  "init":
    //             var bild = '{"type":"bind","from_id":"'+from_id+'"}';
    //             ws.send(bild);
    //             list();
    //             return;
    //         case "text":
    //             $(".chat-fui-content").html("");
    //             list();
    //             return;
    //         case "say_img":
    //             $(".chat-fui-content").html("");
    //             list();
    //             return;
    //
    //     }
    // }

    // function list(){
    //     $.post(
    //         API_URL+"get_list",
    //         {id:from_id},
    //         function(res){
    //             console.log(res);
    //             $.each(res,function(index,content){
    //
    //                 if(content.countNoread==0){
    //                     $(".chat-fui-content").append('<div onclick=redi("'+content.chat_page+'") class="chat-list flex" ><div class="chat-img"  style="background-image: url('+content.head_url+')"></div> <div class="chat-info"> <p class="chat-merch flex"> <span class="title t-28">'+content.username+'</span> <span class="time">'+mydate(content.last_message.time)+'</span> </p> <p class="chat-text singleflow-ellipsis">'+content.last_message.content+'</p> </div></div>');
    //
    //                 }else{
    //
    //                     $(".chat-fui-content").append('<div onclick=redi("'+content.chat_page+'") class="chat-list flex" ><div class="chat-img"  style="background-image: url('+content.head_url+')"> <span class="badge" style="top: -0.1rem;left: 80%;">'+content.countNoread+'</span> </div> <div class="chat-info"> <p class="chat-merch flex"> <span class="title t-28">'+content.username+'</span> <span class="time">'+mydate(content.last_message.time)+'</span> </p> <p class="chat-text singleflow-ellipsis">'+content.last_message.content+'</p> </div></div>');
    //
    //                 }
    //
    //             })
    //
    //         },'json'
    //     )
    // }

    //    $(function(){
    //        $.post(
    //                API_URL+"get_list",
    //                {id:from_id},
    //                function(res){
    //                    console.log(res);
    //
    //                    $.each(res,function(index,content){
    //
    //                        if(content.countNoread==0){
    //                            $(".chat-fui-content").append('<div onclick=redi("'+content.chat_page+'") class="chat-list flex" ><div class="chat-img"  style="background-image: url('+content.head_url+')"></div> <div class="chat-info"> <p class="chat-merch flex"> <span class="title t-28">'+content.username+'</span> <span class="time">'+mydate(content.last_message.time)+'</span> </p> <p class="chat-text singleflow-ellipsis">'+content.last_message.content+'</p> </div></div>');
    //
    //
    //                        }else{
    //
    //                            $(".chat-fui-content").append('<div onclick=redi("'+content.chat_page+'") class="chat-list flex" ><div class="chat-img"  style="background-image: url('+content.head_url+')"> <span class="badge" style="top: -0.1rem;left: 80%;">'+content.countNoread+'</span> </div> <div class="chat-info"> <p class="chat-merch flex"> <span class="title t-28">'+content.username+'</span> <span class="time">'+mydate(content.last_message.time)+'</span> </p> <p class="chat-text singleflow-ellipsis">'+content.last_message.content+'</p> </div></div>');
    //
    //                        }
    //
    //                    })
    //
    //                },'json'
    //        )
    //    })


    /**
     *根据时间戳格式化为日期形式
     */
    function mydate(nS) {

        return new Date(parseInt(nS) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
    }

    function redi(url) {
        window.location.href = url;
    }

</script>

</html>
